﻿
/// <reference path="jsCoreSite.js" />
/// <reference path="jsUtilMobile.js" />
/// <reference path="jquery-1.9.1.min.js" />

/** Script para generar datos la cantidad de camaras mostradas
* 
*/
//Variable de instancia para cambiar de slide
var mySwiper = null;
//Variable de instancia para velocidad del intervalo en milisegundos
var velocidad = 0;
var isStartTimer = true;
var lastClickedIdSlide = '0';
var listIdTmrActualizaCamara = new Array();
var isFullScreen = false;
var IMG_VISTAS = {
MOSTRAR : {
	value : 1,
	src : "ic_mostrar_vistas.png"
},
OCULTAR : {
	value : 0,
	src : "ic_ocultar_vistas.png"
},
};

var STYLE_CLASS_SLIDE = {
SLIDE_UNO: {
	value: 'slide-uno',
	select: 'slide-uno-select'
},
SLIDE_DOS: {
	value: 'slide-dos',
	select: 'slide-dos-select'
},
SLIDE_TRES: {
	value: 'slide-tres',
	select: 'slide-tres-select'
},
SLIDE_CUATRO: {
	value: 'slide-cuatro',
	select: 'slide-cuatro-select'
}
};


$(document).on('pageinit', '#pageDefault', function () {

$("#panelCamaras").empty();
$("#panelCloseFullScreen").hide();

	
});


$(function () {
mySwiper = $('.swiper-container').swiper({
	pagination: '.pagination',
	paginationClickable: true,
	slidesPerView: 4
});

$('#imgVistas').on({
	'click': function () {
	toogleImgVista($(this));
	}
});

$('#closeFullScreen').on({
	'click': function () 
	{
    closeFullScreen();
	}
});

try
{
$(document).on(screenfull.raw.fullscreenchange, function () {
        if(screenfull.isFullscreen == false)
        {
        		if(isFullScreen == true)
                {
                closeFullScreen();
                }
        }
});
}
catch(e)
{
    console.log('No existe fullscreen event onchange');
}

if ($('[data-role="page"]').width() != null) {
	$("#swipercontainer").width($('[data-role="page"]').width() - 20);
}

var urlVistas = $("#UrlListaVistas").val();
$.mobile.loading('show');
$.ajax({
	cache: false,
	async: true,
	type: "GET",
	contentType: 'application/json; charset=utf-8',
	dataType: 'json',
	url: urlVistas,
	success: onSuccessListaVistas,
	error: onErrorListaVistas
});


});

$(window).bind('resize', function () {
if ($('[data-role="page"]').width() != null) {
	$("#swipercontainer").width($('[data-role="page"]').width() - 20);
}
}).trigger('resize');


function closeFullScreen()
{
    isFullScreen = false;
	$('#panelCamaras table').find('td').each(function(i, el) {
		$(this).show();
        $(this).parent('tr').show();
	})
    //$("#panelCamaras table tr:not(:eq(0))").show(); 
	$('#panelCloseFullScreen').hide();

    if (!!screenfull.enabled == true)
    {
        screenfull.exit();
    }
    else
    {
         $("#panelContentCameras").removeClass('fullScreen');
    }

}



function clearArray(array) {
if (array.length > 0) {
	array.splice(0, array.length);
}
}

function clearTimersStop() {

for (var i = 0; i < listIdTmrActualizaCamara.length; i++) {
	clearTimeout(listIdTmrActualizaCamara[i]);
}
clearArray(listIdTmrActualizaCamara);
}

function actualizarCamaras() {
tryConsole('Entro Actualizar Camaras');
if (listIdTmrActualizaCamara.length > 0) {
	if (isStartTimer == false) {
		detenerTimer();
		return;
	} else {
		iniciarTimerActualizarCamaras();
	}

} else {
	iniciarTimerActualizarCamaras();
}
}

function detenerTimer() {

isStartTimer = false;
clearTimersStop();
}


function iniciarTimerActualizarCamaras() 
{
ajaxActualizarCamaras();
listIdTmrActualizaCamara.push(setTimeout('actualizarCamaras()', velocidad));
}

function ajaxActualizarCamaras() {

var urlActualizarCamaras = $("#UrlActualizarCamaras").val();

$.mobile.loading('show');
$.ajax({
	url: urlActualizarCamaras,
	type: "POST",
	cache: false,
	dataType: "html",
	error: onErrorActualizarCamaras,
	success: onSuccessActualizarCamaras
});

}

function toogleImgVista(img) 
{
var srcActual = img.attr('src');
if (srcActual.toLowerCase().indexOf(IMG_VISTAS.MOSTRAR.src) >= 0) {
srcActual = srcActual.replace(IMG_VISTAS.MOSTRAR.src, IMG_VISTAS.OCULTAR.src);
}
else if (srcActual.toLowerCase().indexOf(IMG_VISTAS.OCULTAR.src) >= 0) {
srcActual = srcActual.replace(IMG_VISTAS.OCULTAR.src, IMG_VISTAS.MOSTRAR.src);
}
$("#panelVistas").toggle(500);
img.attr('src', srcActual);
}

function tryConsole(value) {
if (typeof console != "undefined") {
var newDate = new Date();
console.log(newDate + " " + value);
}
}


function onErrorListaVistas(data, status, error) {

$.mobile.loading('hide');
$("#errorPage").empty();
$("#errorPage").append('Hubo un error al actualizar las vistas');

}


function onSuccessListaVistas(data, status) {

$.mobile.loading('hide');
$("#swiperwrapper").empty();
$("#errorPage").empty();

var listaVistas = null;
try {
	listaVistas = data;
	if (listaVistas.length <= 0) {
		$("#swipercontainer").hide();
		$("#errorPage").append('No se encontraron vistas');
		return;
	}
}
catch (err) {
	$("#swipercontainer").hide();
	$("#errorPage").append('No se encontraron vistas');
	return;

}

var newSlide = null;
var contadorColores = 0;
var idSlide = 1;
console.log('Total Vistas: ' + listaVistas.length);
$.each(listaVistas, function (index, value) {
	var claseColor = '';
	if (contadorColores >= 4) {
		contadorColores = 0;
	}
	switch (contadorColores) {
		case 0:
			claseColor = STYLE_CLASS_SLIDE.SLIDE_UNO.value;
			break;

		case 1:
			claseColor = STYLE_CLASS_SLIDE.SLIDE_DOS.value;
			break;

		case 2:
			claseColor = STYLE_CLASS_SLIDE.SLIDE_TRES.value;
			break;

		case 3:
			claseColor = STYLE_CLASS_SLIDE.SLIDE_CUATRO.value;
			break;

		default:
			console.log('Sin color');
	}
	console.log('Vista ' + this.id_Vista);
	newSlide = mySwiper.createSlide('<div class="helper-slide" ><a href="#" data-idslide ="' + idSlide + '" data-region ="' + this.IdRegionMonit + '" data-zona="' + this.IdZonaMonit + '" data-poblacion="' + this.IdPoblacionMonit + '" data-velocidad="' + this.milisegundos + '" class="boldLink">' + this.Nombre_Vista + '</a></div>', '' + claseColor + ' swiper-slide container-slide', 'div');
	newSlide.append();
	contadorColores = contadorColores + 1;
	idSlide = idSlide + 1;
});

$('#swiperwrapper div a').on('click', function (event) {
	console.log($(this).text() + 'velocidad:' + $(this).attr('data-velocidad'));
	$("#vistaActual").empty();
	$("#panelCamaras").empty();
	$("#vistaActual").text($(this).text());
	detenerTimer();
	var _idRegion = 0;
	var _idSlide = -1;
	var _idPoblacion = 0;
	var _idZona = 0;
	var urlCamaras = $("#UrlListaCamaras").val();
	velocidad = 0;
	velocidad = $(this).attr('data-velocidad');
	_idSlide = $(this).attr('data-idslide');
	_idRegion = $(this).attr('data-region');
	_idPoblacion = $(this).attr('data-poblacion');
	_idZona = $(this).attr('data-zona');

	var listData = {
		idRegion: _idRegion,
		idPoblacion: _idPoblacion,
		idZona: _idZona
	};
	

	$.each(mySwiper.slides, function (index, value) {
		var myClass = $(this).attr("class");
		var slide = $(this);
		var currentId = 0;
		currentId = $(this).find("a").attr('data-idslide');
		if(_idSlide.indexOf(currentId) >= 0 )
		{
			
			$.each(STYLE_CLASS_SLIDE, function (index, value) {
			 if (myClass.toLowerCase().indexOf(value.value) >= 0) 
				 {
					slide.toggleClass(value.value + ' ' + value.select);
				 }
			});
		}
		else if(lastClickedIdSlide.indexOf(currentId) >= 0)
		{
		 
				$.each(STYLE_CLASS_SLIDE, function (index, value) {
				  if (myClass.toLowerCase().indexOf(value.select) >= 0) 
				 {
					slide.toggleClass(value.select + ' ' + value.value);
				 }
			});
		}
	});

	lastClickedIdSlide = _idSlide;
	$.mobile.loading('show');
   
	$.ajax({
		cache: false,
		async: true,
		type: "GET",
		contentType: 'application/json; charset=utf-8',
		dataType: 'json',
		url: urlCamaras,
		data: listData,
		success: onSuccessListaCamaras,
		error: onErrorListaCamaras
	});

	return true;
});


}

function onErrorListaCamaras(data, status, error) {

$.mobile.loading('hide');
$("#errorPage").empty();
$("#errorPage").append('Hubo un error al actualizar las camaras');

}

function onSuccessListaCamaras(data, status) {

$.mobile.loading('hide');
toogleImgVista($('#imgVistas'));
var listaCamaras = null;
try {
	listaCamaras = data;
	if (listaCamaras.length <= 0) {
		detenerTimer();
		$("#errorPage").append('No se encontraron camaras');
		return;
	}
}
catch (err) {
	detenerTimer();
	$("#errorPage").append('No se encontraron camaras');
	return;

}
if (listaCamaras.length <= 4) {
	ajaxActualizarCamaras(); 
}
else {
	isStartTimer = true;
	iniciarTimerActualizarCamaras();
  
}


}



function onErrorActualizarCamaras(data, status, error) {

$.mobile.loading('hide');
$("#errorPage").empty();
$("#errorPage").append('Hubo un error al actualizar las camaras');
}

function onSuccessActualizarCamaras(data, status) {

$.mobile.loading('hide');
console.log(data);

if(isFullScreen == false)
{
    $("#panelCamaras").empty();
    $("#panelCamaras").append(data);
}

$('#panelCamaras table tr').find('img').each(function () {
    
	$(this).load(function(){
        //var random = Math.random();
        //var completeSrc = $(this).attr('src') + "?" + random;
        //$(this).attr('src', completeSrc);
	    console.log('Cargada' + $(this).attr('src'));
	})
	$(this).error(function(){
	    imgError($(this));
	    console.log('No Cargada' + $(this).attr('src'));
	});
	$(this).on('click', function (event) {
        //event.preventDefault();
	    openFullScreen($(this));
    });

});


}


function openFullScreen(imgSelect)
{
    isFullScreen = true;
    var selectedRow = 0;
    $('#panelCamaras table').find('td').each(function(i, el) {
        var currentIdImagen = '';
	    currentIdImagen = $(this).find('img').attr("id");
        if(currentIdImagen == imgSelect.attr("id"))
	    {
            selectedRow = $(this).parent().parent().children().index(this.parentNode);
            console.log("row show:" + selectedRow);
		    $(this).show();
	    }
	    else
	    {
            $(this).hide();
	    }
    })

    $("#panelCamaras table tr:not(:eq(" + selectedRow  + "))").hide(); 
    $("#panelCloseFullScreen").show(); 

     //Si el navegador soporta full Screen nativo verlo en fullScreen, algunos
    //Navegadores no sportan esta función incluyendo safari de iOS 7
    if (!!screenfull.enabled == true)
    {
        screenfull.toggle(imgSelect.get(0));
    }
    else
    {
        $("#panelContentCameras").addClass('fullScreen'); 
    }

}


function imgError(image) {
    var urlImgError = $("#ImgNotFound").val();
    image.onerror = "";
    image.attr('src', urlImgError);
    return true;
}




